import React from "react";
import {inject, observer} from "mobx-react";
import {Popover, Tools} from "weaver-mobile";
import {Route, withRouter} from "react-router-dom";
import {BackTop, WrShow} from "../../../public";
import {observable, toJS} from "mobx";
import Quote from "./quote"
import ProgramItem from "../programItem/index"
import Detail from "./detail"
import Log from "./log"
import Org from "./org"
import querystring from "querystring";
import {RouteLayout, TabPage} from "weaver-mobile-page";

const getLabel = Tools.getLabel;

/**
 * 考核方案
 * jiansong 2019/11/8
 */
@inject("programViewStore")
@withRouter
@observer
export default class Index extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            type: "org", //下属方案sub/组织机构org
            path: this.props.location.pathname,
            height: window.innerHeight
        }
        this.store = this.props.programViewStore;
    }

    componentDidMount() {
        let search = this.props.location.search.replace("?", "");
        let parse = querystring.parse(search);
        if (parse.programid) {
            this.store.form.programid = parse.programid;
        } else {
            this.store.form.programid = "";
        }
        if (parse.resourceid) {
            this.store.form.resourceid = parse.resourceid;
            this.store.form.programtype = parse.programtype;
        } else {
            this.store.form.resourceid = "";
            this.store.form.programtype = "";
        }
        this.store.showtype = "detail";
        this.store.handleInit();
        this.store.initStore(this.props.location.pathname);
    }

    render() {
        const {detail, form, orgStore, onFormChange, programDetail, showtype, logStore} = this.store;
        return (
            <BackTop
                visibilityHeight='200'
                modal
                target={"programView-detail"}
            >
                <div className="workrelate-performance-programView workrelate-roll" style={{height: this.state.height}}>
                    <WrShow show={detail.hasCycle && detail.hasRight}>
                        <TabPage
                            span={[2, 1]}
                            tabs={detail.stabList}
                            tabProps={{
                                onTabClick: (val) => {
                                    this.store.showtype = "detail";
                                    logStore.clearData();
                                    onFormChange({"programtype": val.key, "programid": ""});
                                    programDetail();
                                },
                                page: detail.stabList && detail.stabList.findIndex(item => item.key == form.programtype),
                            }}
                            popover
                            popoverProps={{
                                visible: false,
                                overlay: [(<Popover.Item>{getLabel(513684, "下属方案")}</Popover.Item>), (
                                    <Popover.Item>{getLabel(513687, "查看组织")}</Popover.Item>)],
                                onSelect: (key, index) => {
                                    if (index == 1) {
                                        this.setState({type: "org"})
                                    } else {
                                        this.setState({type: "sub"})
                                    }
                                    this.store.showtype = "org";
                                }
                            }}
                        />
                    </WrShow>
                    {showtype == "detail" &&
                    <Detail menu={this.props.menu} updateListData={this.props.updateListData}/>}
                    {showtype == "log" && <Log/>}
                    {showtype == "org" && <Org type={this.state.type}/>}
                    <Route
                        key="programView-quote"
                        path={this.state.path + "/quote"}
                        render={() => (
                            <RouteLayout>
                                <div className="wm-route-layout">
                                    <Quote updateListData={this.props.updateListData}/>
                                </div>
                            </RouteLayout>
                        )}
                    />
                    <Route
                        key="programView-item"
                        path={this.state.path + "/item"}
                        render={() => (
                            <RouteLayout>
                                <div className="wm-route-layout">
                                    <ProgramItem/>
                                </div>
                            </RouteLayout>
                        )}
                    />
                </div>
            </BackTop>
        )
    }

}


